<!-- 个人中心以下列表 -->
<template>
  <div class="personalList">
    <div class="personalListText" v-for="item in list" :key="item">
      <router-link :to="{path:item.path}">
        <div :class="item.class" class="itemW">
          <h4>{{item.name}}</h4>
          <div>></div>
        </div>
      </router-link>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { name: "我的订单", path: "/orderform", class: "el-icon-tickets" },
        {
          name: "我的收藏",
          path: "/collect",
          class: "el-icon-star-off"
        },
        {
          name: "我的报价单",
          path: "/myquotation",
          class: "el-icon-document-checked"
        },
        {
          name: "我的地址",
          path: "/myaddress",
          class: "el-icon-place"
        },
        {
          name: "我的发票",
          path: "/myinvoice",
          class: "el-icon-postcard"
        }
      ]
    };
  }
};
</script>
<style lang='scss' scoped>
.personalList {
  width: 100%;

  .personalListText {
    height: 48px;
    border-bottom: 0.999px solid #ccc;
    margin-left: 16px;

    a {
      color:#666;
      text-decoration: none;
      .itemW {
        display: flex;
        justify-content: space-between;
        padding-top: 20px;
        margin-right: 15px;

        h4 {
          width: 255px;
          text-align: left;
          font-weight: 400;
        }
      }
    }
  }
}
</style>